<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{$region['title']}</title>
    <link rel="stylesheet" href="{MODULE_URL}template/mobile/style/style1/static/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/style/style1/static/css/region.css" />
    <script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/jquery-1.11.1.min.js"></script>
    <style type="text/css">
    body {
        color: #777;
    }
    
    .add-image {
        clear: both;
        width: 96%;
        padding-left: 4%;
        height: 90px;
        background-color: #FFF;
        border-bottom: 1px solid #dfe9e8;
        border-top: 1px solid #dfe9e8;
        clear: both;
    }
    
    .fileInput {
        height: 100%;
        width: 100%;
        overflow: hidden;
        font-size: 300px;
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    
    .nav-ul li:hover {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .nav {
        clear: both;
        width: 100%;
    }
    
    .nav-ul {
        margin: 8px 8px 0 2px;
        overflow: hidden;
    }
    
    .nav-ul li {
        float: left;
        width: 6.1em;
        height: 6.1em;
        margin: 0.5em 1.2em 1em 0;
        box-sizing: border-box;
        position: relative;
    }
    
    .nav-ul li div {
        width: 100%;
        height: 100%;
        line-height: 32px;
        font-size: 12px;
        text-align: center;
        background:url({MODULE_URL}template/mobile/style/style1/static/image/add-img.jpg) no-repeat center;
        background-size: 100%;
    }
    
    .nav-ul li div img {
        margin: 0 !important;
        width: 100%;
        height: 100%
    }
    </style>
</head>

<body>
    <header id="header">
        <div class="header_div">
            <div id="left_div" onClick="javascript:history.back();"></div>
            <div id="middle_div">
                <h1 id="title">家政</h1></div>
            <div id="right_div">
                <div class="right_bottom"></div>
                <div class="right_img"></div>
            </div>
        </div>
    </header>
    <div class="cont">
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell weui_cell_select weui_select_after">
                <div class="weui_cell_hd">
                    服务项目：
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <select class="weui_select" name="category" id='category' style="margin-left:-15px;">
                        <option>选择服务</option>
                        {loop $categories $category}
                        <option value="{$category['id']}">

                        {$category['name']}&nbsp;&nbsp;
                        <p style='font-size:10px;'>
                        {$category['price']}/{$category['gtime']}
                        </p>

                        </option>
                        {/loop}
                    </select>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    服务时间：
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                     <input class="weui_input" type="datetime-local" id="servicetime" />
                </div> 
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">姓名：</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="{$member['realname']}" id="realname" />
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">电话：</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="{$member['mobile']}" id="mobile" />
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">地址：</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="{$member['address']}" id="address" />
                </div>
            </div>
            <a style="height:20px;width:100%;background-color: #efeef4;display:none"  id='ddd'></a>
            <div class="weui_cell" style="display:none" id='dd'>
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea"  rows="3" id="cc"></textarea>
                    
                </div>
            </div>
            <a style="height:20px;width:100%;background-color: #efeef4;display:block"></a>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea" placeholder="问题描述,长度5-200个字之间。" rows="3" id="content"></textarea>
                    <div class="weui_textarea_counter"><span>0</span>/200</div>
                </div>
            </div>
        </div>
        <div class="bd spacing" style="text-align:center;margin-top:10px;">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast" style="width:80%">申请预约</a>
        </div>
        <div id="toast" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">预约成功</p>
            </div>
        </div>
    </div>
    <script>
    $(function() {
        select('a1');
    });
    </script>
    <script type="text/javascript">
    $(function() {
            $("#category").change(function() {
                var cid = $("#category option:selected").val();
                 if (cid != '0') {
                    $.getJSON("{php echo $this->createMobileUrl('homemaking',array('op' => 'ajax'))}", {cid:cid}, function (data) { 
                        var content = '服务介绍：';
                        content += data.description;
                        $("#ddd").show();
                        $("#dd").show();
                        $("#cc").html(content);
                    });
                } else {

                }
            });
        $("#showToast").click(function(event) {
            var content = $("#content").val();
            if (content == '') {
                alert('描述不能为空！');
                return false
            };
            if (content.length <= 5 || content.length >= 200) {
                alert('描述必须大于5个小于200个字');
                return false
            };
            var category = $("#category").val();
            var servicetime = $("#servicetime").val();
            var realname = $("#realname").val();
            var mobile = $("#mobile").val();
            var address = $("#address").val();

            $.ajax({
                url: "{php echo $this->createMobileUrl('homemaking',array('op' => 'add'))}",
                dataType: 'json',
                data: {
                    content: content,
                    category: category,
                    servicetime: servicetime,
                    realname: realname,
                    mobile: mobile,
                    address: address
                },
                success: function(s) {
                    if (s.status == 1) {
                        $('#toast').show();
                        setTimeout(function() {
                            $('#toast').hide();
                            window.location.reload();
                        }, 3000);
                    };
                }
            })


        });
    })
    </script>
    {template 'style/style1/footer'}
</body>

</html>
